<template>
	<view class="data-panel">
		<u-navbar title="销售员业绩" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>


		<view class="header">
			<image class="left-img" src="/static/images/PieChartOutlined.png"></image>
			<view class="title">监控</view>
			<view class="info">
				<view class="name">数据看板</view>
				<view class="line"></view>
				<view class="time">2024-11-06 10:38:24</view>
			</view>
			<view class="tabs">
				<view class="tab" :class="{active: index === currTabIdx}" v-for="(item, index) in tabs"
					@click="handleTapClick(index, item.type)">
					{{item.text}}
				</view>
			</view>
			<image class="right-img" src="/static/images/solar_diagram-up-outline.png"></image>
		</view>


		<view class="card">
			<view class="title">今日{{currText}}</view>

			<view class="charts-box">
				<qiun-data-charts type="tarea" :opts="echartConfigs" :chartData="chartData" />
			</view>
		</view>

		<view class="card">
			<view class="title">本周{{currText}}</view>
			<view class="charts-box">
				<qiun-data-charts type="tarea" :opts="echartConfigs" :chartData="chartData" />
			</view>
		</view>

		<view class="card">
			<view class="title">本月{{currText}}</view>
			<view class="charts-box">
				<qiun-data-charts type="tarea" :opts="echartConfigs" :chartData="chartData" />
			</view>
		</view>

	</view>
</template>

<script>
	import qiunDataCharts from '@/packagePlan/static/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				tabs: [{
						type: 'xs-order',
						text: '销售订单'
					},
					{
						type: 'xs-amount',
						text: '销售金额'
					},
					{
						type: 'xz-client',
						text: '新增客户'
					},
				],
				currTabIdx: 0,
				currText: '销售订单',
				echartConfigs: {
					color: ["#0F62FF"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						axisLine: false,
						data: [{
							min: 0,
							max: 180
						}]
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.1,
							addLine: true,
							width: 2,
							gradient: true,
							barBorderCircle: true,
							activeType: "none"
						}
					}
				},
				chartData: {}
			}
		},
		created() {
			this.getServerData()
		},
		methods: {
			handleTapClick(index, type) {
				this.currTabIdx = index
				this.currText = this.tabs[index].text
				console.log(type);
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
						series: [{
							name: "成交量A",
							data: [100, 80, 95, 150, 112, 132]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		background-color: #D0241C;
	}
</style>

<style lang="scss" scoped>
	.data-panel {
		width: 100%;
		box-sizing: border-box;
		color: #fff;


		.header {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			padding-bottom: 30rpx;

			.left-img,
			.right-img {
				position: absolute;
				bottom: 30rpx;
			}

			.left-img {
				width: 202rpx;
				height: 202rpx;
				left: 20rpx;
			}

			.right-img {
				width: 328rpx;
				height: 328rpx;
				right: 10rpx;
			}


			.title {
				text-align: center;
				font-size: 40rpx;
				margin-bottom: 60rpx;
				margin-top: 55rpx;
			}


			.info {
				display: flex;
				align-items: center;


				.name {
					font-size: 44rpx;
				}

				.line {
					width: 1rpx;
					height: 30rpx;
					background-color: #fff;
					margin: 0 20rpx;
				}

				.time {
					font-size: 28rpx;
				}
			}

			.tabs {
				display: flex;
				align-items: center;
				margin-top: 38rpx;

				.tab {
					padding: 14rpx 24rpx;
					background-color: #fff;
					color: #333;
					border-radius: 30rpx;
					margin: 0 18rpx;
					z-index: 999;
					box-shadow: 0px 2px 12px #555;
				}

				.active {
					color: #D0241C;
				}
			}
		}

		.card {
			margin: 0 20rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: #fff;
			box-shadow: 0px 2px 8px #666;

			.title {
				font-size: 36rpx;
				color: #333;
			}

			.charts-box {
				width: 100%;
				height: 300px;
			}
		}
	}
</style>